<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    </head>
<body>
上传图片：
    <form id="form" enctype="multipart/form-data">
        <input type="text" name="productName">
        <input type="file" name="file">
        <button>上传</button>
    </form>

    <script type="text/javascript">

        $('body').append('<img src="/upload/仓库.png"/>');

        $('form').on('submit',function(){

            //带有图片上传的表单，需要通过formData对象来获取表单中的参数
            let formData = new FormData($('#form')[0]);
            console.log(123);

            /*
            *   图片上传实际是通过io流操作，需要以字节流的形式传递（二进制形式）
            *   ajax在发送请求传递数据的时候，默认会将数据转换为字符串processData:false
            *
            *   要求ajax传递参数的时候，不进行字符串的转换
            * */
            $.ajax({
                type:"POST",
                url:"file/addFile",
                data:formData,
                processData:false,
                contentType:false,
                success:function(res){
                    alert(res);
                    console.log(123);
                }
            })
            return false;
        })
    </script>
</body>

</html>